<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap 的 CSS 文件 -->
  <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="./css/bootstrap@5.1.3/bootstrap-icons.css">
  <link rel="stylesheet" href="./css/base.css">
  <script src="./js/plugins/holder/holder.js"></script>

  <title>首页</title>
  <style>
    .books-message-title {
      width: 120px;
      padding: 10px 0px; 
      font-size: 1.2em;
      font-weight: bold;
      text-align: center;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      color: white;
    }

    .new-book {
      background-color: #DC3545; 
    }

    .hot-book{
      background-color: #007ACC;
      
    }

    .card-book-name {
      text-decoration: none;
      color: black;
      /* 行高，用于计算两行的最小高度 */
      line-height: 1.5;
      /* 最小高度 = 行高 × 2 */
      min-height: 3em;
      /* 控制文本行数，超出3行（这里设置3是为了兼容部分浏览器，实际实现两行省略） */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      /* 文本溢出显示省略号 */
      overflow: hidden;
      text-overflow: ellipsis;

    }

    
  </style>
</head>

<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light nvarbar-padding">
    <div class="container">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
        aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse pt-3 pt-lg-0" id="navbarText">
        <span class="navbar-text me-auto">
          欢迎光临,请 <a href="user.html">登录</a> 成为会员
        </span>
        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="index.html">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="my.html">我的</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- 顶部导航 end-->
  <main class="container">
    <!-- 搜素框 -->
    <div class="row align-items-center">
      <div class="col-lg-auto d-none d-lg-block">
        <a href="index.html">
          <img src="./images/logo.png" alt="" />
        </a>
      </div>
      <div class="col-md-6  p-md-3 mt-3 mt-lg-0">
        <div class="input-group  ">
          <input type="text" class="form-control " style="outline: 1px solid #DC3545;"
            placeholder="书名/出版社/ISBN" aria-label="Recipient's username" aria-describedby="button-addon2">
          <a class="btn  btn-danger btn-lg" href="search.html" type="button" style="outline: 1px solid #DC3545;"
            id="button-addon2">&nbsp;&nbsp;<i class="bi-search"></i>&nbsp;&nbsp;</a>
        </div>
      </div>
      <div class="col-md-auto col-12 mt-lg-0 mt-3 d-flex justify-content-end">
        <div class="btn-group ">
          <a type="button" href="cart.html" class="btn btn-danger position-relative">
            <i class="bi-cart" style="font-size: 1.2em"></i>购物车 
            <span id="cartTag" class="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-danger">0</span>
          </a>
          <button type="button " class="btn btn-light">我的订单</button>
        </div>
      </div>
    </div>
    <!-- 搜素框 end -->
  </main>
  <!-- 分类导航信息 -->
  <div class="container mt-3">
    <div class="row nav-title" id="navCategory">
      <div class="col-auto py-2 d-none d-md-block nav-header">
        技术方向
      </div>
        <div class="col-auto py-2 px-4">
          <a href="search.html">Java</a>
        </div>
        <div class="col-auto py-2 px-4">
          <a href="#">Python</a>
        </div>
        <div class="col-auto py-2 px-4">
          <a href="#">C/C++</a>
        </div>
        <div class="col-auto py-2 px-4">
          <a href="#">前端</a>
        </div>
        <div class="col-auto py-2 px-4">
          <a href="#">Spring</a>
        </div>
        <div class="col-auto py-2 px-4">
          <a href="#">JavaWeb</a>
        </div>
    </div>
  </div>
  <hr style="border:none;height:2px;background-color: #DC3545;opacity: 1;margin-top: 0;" />
  <!-- 分类导航信息 end -->
  <!-- 轮播图 -->
  <div class="container">
    <div class="row">
      <div class="col">
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
              aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
              aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
              aria-label="Slide 3"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="holder.js/750x400?random=yes" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="holder.js/750x400?random=yes" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="holder.js/750x400?random=yes" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- 轮播图 end -->


  <div class="container">
    <!-- 最新图书 -->
    <div class="row mt-3">
      <div class="col ">
        <div class="books-message-title new-book">
          最新图书
        </div>
        <hr style="margin-top: 0;opacity: 1;background-color: #ccc;">
      </div>
    </div>
    <div class="row" id="newBooksContainer">
      <div class="col-12   col-md-6 col-lg-3" >
        <div class="card">
          <a href="book.html">
            <img src="holder.js/100px320" class="card-img-top" alt="...">
          </a>
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="card-book-name">JavaWeb核心技术</a>
            </h5>
            <p class="card-text" style="margin-bottom: 0.2em;">
              （英）沃伯顿　著，王群锋　译 <br>
            </p>
            <span style="color:red;font-size:1em">¥39.06</span>
            <p style="text-align: right;margin:0px;">
              <a href="#" class="card-link ">添加购物车</a>
              <a href="#" class="card-link ">收藏</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12   col-md-6 col-lg-3">
        <div class="card">
          <a href="#">
            <img src="holder.js/100px320" class="card-img-top" alt="...">
          </a>
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="card-book-name">JavaWeb核心技术</a>
            </h5>
            <p class="card-text" style="margin-bottom: 0.2em;">
              （英）沃伯顿　著，王群锋　译 <br>
            </p>
            <span style="color:red;font-size:1em">¥39.06</span>
            <p style="text-align: right;margin:0px;">
              <a href="#" class="card-link ">添加购物车</a>
              <a href="#" class="card-link ">收藏</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12  col-md-6 col-lg-3">
        <div class="card">
          <a href="#">
            <img src="holder.js/100px320" class="card-img-top" alt="...">
          </a>
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="card-book-name">JavaWeb核心技术</a>
            </h5>
            <p class="card-text" style="margin-bottom: 0.2em;">
              （英）沃伯顿　著，王群锋　译 <br>
            </p>
            <span style="color:red;font-size:1em">¥39.06</span>
            <p style="text-align: right;margin:0px;">
              <a href="#" class="card-link ">添加购物车</a>
              <a href="#" class="card-link ">收藏</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card">
          <a href="#">
            <img src="holder.js/100px320" class="card-img-top" alt="...">
          </a>
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="card-book-name">JavaWeb核心技术</a>
            </h5>
            <p class="card-text" style="margin-bottom: 0.2em;">
              （英）沃伯顿　著，王群锋　译 <br>
            </p>
            <span style="color:red;font-size:1em">¥39.06</span>
            <p style="text-align: right;margin:0px;">
              <a href="#" class="card-link ">添加购物车</a>
              <a href="#" class="card-link ">收藏</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 最新图书 end -->
    <!-- 人气图书 -->
    <div class="row mt-3">
      <div class="col ">
        <div class="books-message-title hot-book">
          人气图书
        </div>
        <hr style="margin-top: 0;opacity: 1;background-color: #ccc;">
      </div>
    </div>
    <div class="row">
      <div class="col-12   col-md-6 col-lg-3">
        <div class="card">
          <a href="#">
            <img src="holder.js/100px320" class="card-img-top" alt="...">
          </a>
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="card-book-name">JavaWeb核心技术</a>
            </h5>
            <p class="card-text" style="margin-bottom: 0.2em;">
              （英）沃伯顿　著，王群锋　译 <br>
            </p>
            <span style="color:red;font-size:1em">¥39.06</span>
            <p style="text-align: right;margin:0px;">
              <a href="#" class="card-link ">添加购物车</a>
              <a href="#" class="card-link ">收藏</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12   col-md-6 col-lg-3">
        <div class="card">
          <a href="#">
            <img src="holder.js/100px320" class="card-img-top" alt="...">
          </a>
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="card-book-name">JavaWeb核心技术</a>
            </h5>
            <p class="card-text" style="margin-bottom: 0.2em;">
              （英）沃伯顿　著，王群锋　译 <br>
            </p>
            <span style="color:red;font-size:1em">¥39.06</span>
            <p style="text-align: right;margin:0px;">
              <a href="#" class="card-link ">添加购物车</a>
              <a href="#" class="card-link ">收藏</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12  col-md-6 col-lg-3">
        <div class="card">
          <a href="#">
            <img src="holder.js/100px320" class="card-img-top" alt="...">
          </a>
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="card-book-name">JavaWeb核心技术</a>
            </h5>
            <p class="card-text" style="margin-bottom: 0.2em;">
              （英）沃伯顿　著，王群锋　译 <br>
            </p>
            <span style="color:red;font-size:1em">¥39.06</span>
            <p style="text-align: right;margin:0px;">
              <a href="#" class="card-link ">添加购物车</a>
              <a href="#" class="card-link ">收藏</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card">
          <a href="#">
            <img src="holder.js/100px320" class="card-img-top" alt="...">
          </a>
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="card-book-name">JavaWeb核心技术</a>
            </h5>
            <p class="card-text" style="margin-bottom: 0.2em;">
              （英）沃伯顿　著，王群锋　译 <br>
            </p>
            <span style="color:red;font-size:1em">¥39.06</span>
            <p style="text-align: right;margin:0px;">
              <a href="#" class="card-link ">添加购物车</a>
              <a href="#" class="card-link ">收藏</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 人气图书 end-->
  </div>

  <!-- 提示消息position-absolute bottom-0 end-0 p-3 translate-middle -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3"  style="z-index:100000;margin-top:-120px" >
    <div id="liveToast" class="toast" data-bs-delay="1000" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body">

        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>
 
  <!-- 页脚 -->
  <footer class="doc-footer">
          &copy;湖南农业大学
  </footer>
  <!-- 页脚 end -->

  <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
  <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
  <script src="./js/plugins/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>

  <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
  <!--<script src="./js/plugins/bootstrap@5.1.3/popper.min.js"></script>
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.min.js"></script>-->

  <script>
    /**
     *
     * @author 证实姓名 学号
     */
    //加载分类数据
    let navCategory = document.querySelector("#navCategory");
    navCategory.innerHTML ='';
    fetch("../category.index").then(response=>response.json()).then(data=>{
        if(data.success){
           let subItem=`<div class="col-auto py-2 d-none d-md-block nav-header">
                         技术方向
                        </div>`;
           //for-of 从数组中将数据迭代
           for(let category of data.data){
               subItem+= `<div class="col-auto py-2 px-4">
                           <a href="search.html?id=${category.id}">${category.name}</a>
                         </div> `;
           }

           navCategory.innerHTML=subItem;
        }
    });
    let navTopBar = document.querySelector("#navbarText");

    let topNavBar=()=>{
          let userInfo= sessionStorage.getItem("userData");
          console.log(userInfo);
          if(userInfo){
            let  userData = JSON.parse(userInfo);

            let item =`<span class="navbar-text me-auto">
                          欢迎光临, <a href="my.html?id=${userData.id}">${userData.username}</a>
                        </span>
                        <ul class="navbar-nav mb-2 mb-lg-0">
                          <li class="nav-item">
                            <a class="nav-link" href="index.html">首页</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">登出</a>
                          </li>
                       </ul>`;
          navTopBar.innerHTML=item;
          }
     }

    topNavBar();
 // 加载banner
     let bannerInner=document.querySelector("#carouselExampleCaptions .carousel-inner");
     bannerInner.innerHTML=''
      fetch("../banner.index").then(response=>response.json()).then(data=>{
          console.log(data);
          if(data.success){
             let banners=data.data;
             for(let banner of banners){
                let bannerItem=`<div class="carousel-item ${banner.order==0?'active':''}">
                      <img src="${banner.imageUrl}" class="d-block w-100" alt="750x400"  data-holder-rendered="true" style="width: 750px; height: 400px;">
                      <div class="carousel-caption d-none d-md-block">
                      <h5>${banner.title}</h5>
                      <p>${banner.subTitle}</p>
                      </div>
                </div>`;
                //将字符串转成 Dom 对象 （不安全）
             let subItemDom=   document.createRange().createContextualFragment(bannerItem);
             bannerInner.appendChild(subItemDom);

             }
          }
      })
    //定位页面中最新图书的dom
    let newBooksContainer=document.querySelector("#newBooksContainer");

    //加载newBooks
    fetch("../books.index").then(response=>response.json()).then(result=>{

      if(result.success){
        newBooksContainer.innerHTML='';
        let newBooks = result.data.newBooks;
        let booksNewItem='';
        for(let book of newBooks){
          booksNewItem+=`<div class="col-12   col-md-6 col-lg-3" >
                          <div class="card">
                            <a href="book.html">
                              <img src="images/books/${book.pic}" class="card-img-top" alt="...">
                            </a>
                            <div class="card-body">
                              <h5 class="card-title">
                                <a href="#" class="card-book-name">${book.title}</a>
                              </h5>
                              <p class="card-text" style="margin-bottom: 0.2em;min-height: 48px">
                                ${book.author}<br>
                              </p>
                              <span style="color:red;font-size:1em">¥${book.price}</span>
                              <p style="text-align: right;margin:0px;">
                                <a href="javascript:void(0);" data-books='${JSON.stringify(book).replace(/"/g, '\\\"')}' onclick="addCart(${book.id})" class="card-link ">添加购物车</a>
                                <a href="#" class="card-link ">收藏</a>
                              </p>
                            </div>
                          </div>
                        </div>`;
        }
        newBooksContainer.innerHTML=booksNewItem;
      }
    });

    let cartTagSpan = document.querySelector("#cartTag");

    let addCart = (id)=>{
       // console.log(obj.dataset.books);
       // let bookStr = obj.dataset.books;
       // bookStr=bookStr.replace(/\\/g,"");
       // let book=JSON.parse(bookStr);
       // console.log(book);
      fetch(`../add.cart?id=${id}`).then(response=>response.json()).then(result=>{
        console.log(result);
        //弹出消息提示框
        let toastLiveExample = document.getElementById('liveToast');
        let toastBody= document.querySelector("#liveToast .toast-body");
        toastBody.innerHTML=result.message;
        let toast = new bootstrap.Toast(toastLiveExample);
        console.log(toast);
        toast.show();

        let count =parseInt(cartTagSpan.innerHTML.trim());
        cartTagSpan.innerHTML = count+1;
      })
    }
  </script>
</body>

</html>